<template>
	<view class="content">

		<view class="add">
			<view class="s1">STEP 2/4</view>
			<view class="title">选择模板</view>

			<view class="temp">

				<!-- <view class="item item-0" :class="{active: temp_id == 0}" @click="setTremId(0)">
					<view class="c1"></view>
					<view class="c2">直接编辑</view>
				</view> -->

				<view v-for="(item,index) in list" :key="index" @click="setTremId(item.id)">
					<view class="item item-1 " :class="{active: temp_id == item.id}">
						<view class="imgWrap">
							<image :src="item.image_url"></image>
						</view>
						<!-- 	<view class="c1"></view>
						<view class="c2 u-line-1">{{ item.share_title }}</view> -->
					</view>
					<view :class="{active: temp_id == item.id}" style="position: relative;margin-top: 20rpx;">
						<view class="c1 "></view>
						<view class="u-line-1 bbbp">{{ item.share_title }}</view>
					</view>
				</view>

				<view @click="setTremId(0)">
					<view class="item item-1 " :class="{active: temp_id == 0}">
						<view class="imgWrap">
							<image mode="aspectFill" v-if="template_custom_image" :src="show_template_custom_image">
							</image>
							<view v-else class="ccsccs" style="">自定义上传</view>
						</view>

					</view>
					<view :class="{active: temp_id == 0}" style="position: relative;margin-top: 20rpx;"
						@click.stop="temp_id=0">
						<view class="c1 "></view>
						<view class="u-line-1 bbbp">自定义模版</view>
					</view>
				</view>
			</view>

		</view>

		<view class="but">
			<view class="" style="display: flex;">
				<view class="s1" @click="onBack()">
					<image src="@/static/icon/left.png"></image>
					<text>上一步</text>
				</view>
				<view @click="save" class="save">保存</view>
			</view>
			<view class="s2" @click="goSend(2)">
				<text>下一步</text>
				<image src="@/static/icon/right.png"></image>
			</view>
		</view>
		<u-overlay :show="show" @click="show = false">
			<view class="modal">
				<view class="box" @click.stop>
					<view class="title">
						是否需要为你创建的内容进行保存
						避免下次进入重新创建
					</view>
					<view class="btn">
						<view class="out" @click="handleSave(0)">
							直接退出
						</view>
						<view class="in" @click="handleSave(1)">
							保存
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import conf from '@/common/config.js';
	export default {
		data() {
			return {
				show: false,
				id: 0,
				temp_id: 1,
				template_custom_image: '',
				show_template_custom_image: '',
				list: [{
					image_url: '../../static/one.png',
					share_title: '模版一',
					id: 1
				}, {
					image_url: '../../static/four.png',
					share_title: '模版二',
					id: 2
				}, {
					image_url: '../../static/three.png',
					share_title: '模版三',
					id: 3
				}, {
					image_url: '../../static/two.png',
					share_title: '模版四',
					id: 4
				}],

			};
		},
		props: {
			addForm: {
				type: Object,
				default: () => {
					return {}
				}
			},
			editId: {
				type: [Number, String]
			},
			tempId: {
				type: [Number, String]
			}
		},
		// onLoad(options) {
		//     this.id = options.id
		// },
		mounted() {
			// this.getList();
			// console.log(this.addForm, this.tempId);
			if (this.addForm.templateid !== '') {
				this.temp_id = this.addForm.templateid !== '' ? this.addForm.templateid : this.tempId
				if (this.temp_id == 0) {
					this.template_custom_image = this.addForm.template_custom_image
					this.show_template_custom_image = conf.preview_url + this.template_custom_image
				}
			}
		},
		methods: {
			save() {
				this.show = true
			},
			getList() {
				this.$API.templateList().then(res => {
					this.list = res.data;
				}).catch(err => {
					console.log('err', err)
				})
			},
			setTremId(id) {
				this.temp_id = id;
				if (this.temp_id === 0) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: (res) => {
							uni.showLoading({
								title: '上传中'
							})
							this.uploadFilePromise(res.tempFilePaths[0]).then((res => {
								console.log(res);
								this.show_template_custom_image = res.fullurl
								this.template_custom_image = res.url
							})).finally(() => {
								uni.hideLoading()
							})

						}
					});
				}
			},
			uploadFilePromise(url) {
				let host_url = conf.url_config + '/api/common/upload';
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: host_url,
						filePath: url,
						name: 'file',
						formData: {
							size: '5'
						},
						header: {
							Token: this.vuex_token
						},
						success: (res) => {
							let data = JSON.parse(res.data);
							setTimeout(() => {
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
			onBack() {
				this.$emit('onBack')
				// uni.redirectTo({
				// 	url: '/pages/activity/add_1?id=' + this.id
				// })
			},
			goSend(type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/activity/add_3?temp_id=0&id=' + this.id
					})
				} else {
					if (this.temp_id === 0 && !this.template_custom_image) return this.$u.toast('请上传自定义模板图片')
					this.$emit('updateaddTwo', {
						tempId: this.temp_id,
						id: this.id,
						template_custom_image: this.template_custom_image
					})
					// uni.navigateTo({
					// 	url: '/pages/activity/add_3?temp_id=' + this.temp_id + '&id=' + this.id
					// })
				}
			},
			handleSave(type) {
				if (type) {
					const params = this.addForm || {}
					this.$API.saveDraft({
						title: params.title,
						start_time: params.start_time,
						end_time: params.end_time,
						phone: params.phone,
						address: params.address,
						images: params.images,
						money: params.money,
						templateid: this.temp_id,
						template_custom_image: this.template_custom_image
					}, +this.editId).then(res => {
						this.show = false
						uni.showModal({
							title: '提示',
							content: '恭喜您保存成功！',
							showCancel: false,
							success: () => {
								// this.$store.commit('$uStore', {
								// 	name: 'vuex_tempForm',
								// 	value: {}
								// })
								uni.redirectTo({
									url: '/pages/activity/index'
								})
							}
						})

					})
				} else {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 670rpx;
		margin: 0 auto;
		padding-bottom: 50rpx;
	}

	.add {
		width: 566rpx;
		padding: 52rpx;
		background-color: #fff;
		border-radius: 28rpx;
		margin-top: 52rpx;

		.s1 {
			width: 100%;
			height: 34rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #7677EB;
			line-height: 34rpx;
			text-align: center;
		}

		.title {
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #110202;
			line-height: 52rpx;
			text-align: center;
			margin-top: 16rpx;
		}
	}

	.temp {
		@include flex(column);
		margin: 0 auto;
		margin-top: 16rpx;
		width: 566rpx;

		.item {
			width: 566rpx;
			height: 100%;
			background: #F4F9FD;
			border-radius: 28rpx;
			opacity: 1;
			border: 2rpx solid #F4F9FD;
			@include flex(column);
			align-items: center;
			margin-top: 40rpx;
			position: relative;

			.imgWrap {
				width: 100%;
				height: 180rpx;
				border-radius: 28rpx;
				// position: absolute;
				// left: 16rpx;
				// top: 16rpx;
				// background: linear-gradient(90deg, rgba(244, 249, 253, 0) 0%, rgba(82, 93, 101, 0.7324) 55%, #17242E 100%);

				image {
					width: 100%;
					height: 100%;
					border-radius: 28rpx;
				}
			}

			.c1 {
				width: 40rpx;
				height: 40rpx;
				background: #D8E0F0;
				border-radius: 50%;
				position: absolute;
				left: 44rpx;
				top: 82rpx;

				&::before {
					content: "";
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					background: #fff;
					border-radius: 50%;
					left: 4rpx;
					top: 4rpx;
				}
			}

			.c2 {
				position: absolute;
				height: 42rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #0A1629;
				line-height: 42rpx;
				top: 82rpx;
				left: 112rpx;
			}

		}

		.item-0 {
			height: 196rpx;

			.c1 {
				top: 78rpx;
			}

			.c2 {
				top: 78rpx;
			}
		}

		.item-1 {
			.c2 {
				color: #fff;
			}
		}

		.active {
			border-color: #7677EB;

			.c1 {
				&::after {
					content: "";
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					background: #7677EB;
					border-radius: 50%;
					left: 10rpx;
					top: 10rpx;
				}
			}
		}
	}


	.but {
		@include flex;
		justify-content: space-between;
		margin-top: 60rpx;
		margin-bottom: 60rpx;

		.save {
			width: 176rpx;
			height: 92rpx;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #7677EB;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			font-size: 30rpx;
			color: #7677EB;
			text-align: center;
			line-height: 92rpx;
		}

		.s1 {
			width: 176rpx;
			height: 96rpx;
			@include flex;
			justify-content: center;
			align-items: center;
			padding-right: 10rpx;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #7677EB;
				line-height: 96rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 28rpx;
			}
		}

		.s2 {
			width: 290rpx;
			height: 96rpx;
			background: #7677EB;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			@include flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 96rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 28rpx;
			}
		}
	}

	.modal {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		padding: 0 40rpx;

		.box {
			width: 622rpx;
			height: 432rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 0 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
				margin-top: 70rpx;
				padding: 0 30rpx;
			}

			.btn {
				margin-bottom: 70rpx;
				display: flex;
				justify-content: space-between;

				.out {
					width: 240rpx;
					height: 96rpx;
					box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 140, 255, 0.2637);
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					border: 2rpx solid #7677EB;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					font-size: 30rpx;
					color: #7677EB;
					text-align: center;
					line-height: 96rpx;
					box-sizing: border-box;
				}

				.in {
					width: 240rpx;
					height: 96rpx;
					background: #7677EB;
					box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 140, 255, 0.2637);
					border-radius: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 96rpx;
				}
			}
		}
	}

	.bbbp {
		color: #7c7c7c;
		margin-left: 60rpx;
	}

	.c1 {
		width: 40rpx;
		height: 40rpx;
		background: #D8E0F0;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;

		&::before {
			content: "";
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			background: #fff;
			border-radius: 50%;
			left: 4rpx;
			top: 4rpx;
		}
	}

	.active {
		border-color: #7677EB;

		.c1 {
			width: 40rpx;
			height: 40rpx;
			background: #e6eeff;
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 0;

			&::after {
				content: "";
				position: absolute;
				width: 32rpx;
				height: 32rpx;
				background: #fff;
				border-radius: 50%;
				left: 4rpx;
				top: 4rpx;

			}

			&::before {
				content: "";
				position: absolute;
				width: 22rpx;
				height: 22rpx;
				border-radius: 50%;
				left: 4rpx;
				top: 4rpx;

			}
		}
	}

	.ccsccs {
		background-color: #d7d8fe;
		height: 100%;
		border-radius: 30rpx;
		color: #7879f1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;
		font-weight: bold;
	}
</style>